<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>店铺上传商品</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/storeupload.css">
    <script src="../js/jquery-2.2.3.min.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/common.js"></script>
    <style>
        .item-img{
            overflow: hidden;
        }
        .item-img img{
            width: 100%;
        }
        .file-box {
            position: relative;
            display: inline-block;
            width: 1.08rem;
            height: 1.08rem;
            border: 1px dashed #EB4748;
        }
        .file-box img {
            width: 100%;
            height: 100%;
            display: inline-block;
            border: none;
            z-index: 10000;
        }
        .file-box .txt,.file-box .file {
            width: 70px;
            height: 36px;
            position: absolute;
            top: -20px;
            left: 100px;
            text-align: center;
        }
        .file-filter-p{
            width: 1.08rem; height:1.08rem; border:1px solid black; position: absolute;top:0;
        }
        .file-filter-p img{
            width: 0.8rem;
            height: 0.8rem;
            margin: 0.14rem auto 0 0.14rem;
        }
        .c-n-inp {
            width: 95% !important;
            height: .32rem !important;
            display: block;
            margin: 0 auto;
            margin-top: .1rem;
            background-color: #F4F5F5 !important;
            border-radius: .2rem !important;
            border: none !important;
            outline: none;
            color: #000 !important;
            font-size: 0.14rem !important;
            padding-left: .175rem;
        }
    </style>
</head>

<body style="background-color: #F5F5F5">
    <div class="head">
        <a href="javascript:history.back(-1)">
            <div class="h-left"></div>
        </a>
        <div class="h-middle">我的店铺</div>
        <div class="h-right">我的卖单</div>
    </div>
    <div style="height: .44rem;"></div>
    <ul class="nav-ul">
        <li class="nav-ul-li isactive">我的宝贝</li>
        <li class="nav-ul-li">下架产品</li>
        <li class="nav-ul-li">发布宝贝</li>
    </ul>
    <div class="contBox">
        <!-- 上架 -->
        <div class="nav-box">

        </div>
        <!-- 下架 -->
        <div class="nav-box">

        </div>
        <div class="nav-box" style="background-color: #ffffff">
            <div class="cont-item">
                <div class="box-img box-img1">
                    <div class="file-box">
                        <img id="preview1" />
                        <input type="text" class="preview" style="display:none;">
                        <p class="file-filter-p" onclick="clp(this)">
                            <img src="../img/add.png" alt="">
                        </p>
                        <input type="file" name="file1" style="display: none;" class="input_file input_file1" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            onchange="imgPreview(this)">
                    </div>
                </div>
                <div class="box-img box-img2" style="display:none;">
                    <div class="file-box">
                        <img id="preview2" />
                        <input type="text" class="preview" style="display:none;">
                        <p class="file-filter-p" onclick="clp(this)">
                            <img src="../img/add.png" alt="">
                        </p>
                        <input type="file" name="file2" style="display: none;" class="input_file input_file2" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            onchange="imgPreview(this)">
                    </div>
                </div>
                <div class="box-img box-img3" style="display:none;">
                    <div class="file-box">
                        <img id="preview3" />
                        <input type="text" class="preview" style="display:none;">
                        <p class="file-filter-p" onclick="clp(this)">
                            <img src="../img/add.png" alt="">
                        </p>
                        <input type="file" name="file3" style="display: none;" class="input_file input_file3" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            onchange="imgPreview(this)">
                    </div>
                </div>
                <div class="box-img box-img4" style="display:none;">
                    <div class="file-box">
                        <img id="preview4" />
                        <input type="text" class="preview" style="display:none;">
                        <p class="file-filter-p" onclick="clp(this)">
                            <img src="../img/add.png" alt="">
                        </p>
                        <input type="file" name="file4" style="display: none;" class="input_file input_file4" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            onchange="imgPreview(this)">
                    </div>
                </div>
                <div class="box-img box-img5" style="display:none;">
                    <div class="file-box">
                        <img id="preview5" />
                        <input type="text" class="preview" style="display:none;">
                        <p class="file-filter-p" onclick="clp(this)">
                            <img src="../img/add.png" alt="">
                        </p>
                        <input type="file" name="file5" style="display: none;" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                            class="input_file input_file5" onchange="imgPreview(this)">
                    </div>
                </div>
            </div>
            <div class="cont-title">点击上传商品图片，最多可上传5张</div>
            <!-- <div class="cont-submit" onclick="subImg()">上传图片</div> -->

            <div class="cont-nav">
                <div class="c-n-box">
                    <p class="c-n-p1">商品标题</p>
                    <input class="c-n-inp" name="cp-title" type="text" placeholder="例如：和田玉撒速度">
                </div>
                <div class="c-n-box">
                    <p class="c-n-p1">商品类别</p>
                    <select class="selectcn c-n-inp" type="text" id="cn-type" name="cn-type">

                    </select>
                    <img src="../img/sanjiao.png" class="sanjiao" alt="">
                </div>
                <!--<div class="c-n-box">-->
                    <!--<p class="c-n-p1">商铺名称</p>-->
                    <!--<select class="selectshop c-n-inp" type="text" id="cn-shop" name="cn-shop">-->

                    <!--</select>-->
                    <!--<img src="../img/sanjiao.png" class="sanjiao" alt="">-->
                <!--</div>-->
                <div class="c-n-box">
                    <p class="c-n-p1">商品库存</p>
                    <input class="c-n-inp" name="cn-number" maxlength='11' type="number" placeholder="请输入商品库存">
                </div>
                <div class="c-n-box">
                    <p class="c-n-p1">商品单价</p>
                    <input class="c-n-inp" name="cn-price" maxlength='11' type="number" placeholder="请输入商品单价">
                </div>
                <div class="c-n-box">
                    <p class="c-n-p1">商品详情</p>
                    <textarea class="c-n-tarea" name="cn-miao" placeholder="商品简单的描述……"></textarea>
                </div>
                <div class="cont-logo">
                        <div class="file-box" style="margin:0.2rem auto 0.2rem auto; display:block;">
                            <img id="previewlogo" />
                            <input type="text" class="previewlogo" style="display:none;">
                            <p class="file-filter-p" id="fileP" style="margin:0 auto;">
                                <img src="../img/add.png" alt="">
                            </p>
                            <input type="file" name="file5" id="input_filelogo" style="display: none;" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                                class="input_file input_filelogo" onchange="tiPicture(this)">
                        </div>
                    </div>
                    <div class="cont-title">上传商品logo</div>
            </div>
            <div class="fabiao-submit" onclick="subImg()">
                发表宝贝
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $(".nav-ul li").mouseover(function () {
            //通过 .index()方法获取元素下标，从0开始，赋值给某个变量
            var _index = $(this).index();
            //让内容框的第 _index 个显示出来，其他的被隐藏
            $(".contBox>div").eq(_index).show().siblings().hide();
            //改变选中时候的选项框的样式，移除其他几个选项的样式
            $(this).addClass("isactive").siblings().removeClass("isactive");
        });
    });
    // 下架列表
    $.ajax({
        url: SURL + '/jfd/shopGoods/selectSoldOut',
        type: 'post',
        success: res => {
            var resRe = res.reverse();
            resRe.forEach(element => {
                $('.nav-box').eq(1).append(
                    `
                    <div class="n-b-item">
                        <div class="item-img" style="background:none;">
                            <img src="${element.goodsImg}" />
                        </div>
                        <p class="item-name">商品库存:${element.goodsNum}</p>
                        <p class="item-title">${element.goodsName}</p>
                        <p class="item-jiage">
                            <span class="redMoney">￥${element.shopPrice}</span>
                            <span class="redBtn" data-id="${element.goodsId}" onclick="topClick(this)">点击上架</span>
                        </p>
                    </div>
                `
                )
            });
        }
    })
    // 点击下架商品
    function downClick(e) {
        var dataId = $(e).attr('data-id')
        $.ajax({
            url: SURL + '/jfd/shopGoods/updateGoodsStatus',
            type: 'post',
            data: {
                goodsId: dataId
            },
            success: res => {
                alert(res.msg)
                window.location.reload();
            }
        })

    }
    // 上架列表
    $.ajax({
        url: SURL + '/jfd/shopGoods/selectGoodsShelves',
        type: 'post',
        data: {
          userId: localStorage.getItem('userId')
        },
        success: res => {
            var resRe = res.reverse();
            resRe.forEach(element => {
                $('.nav-box').eq(0).append(
                    `
                    <div class="n-b-item">
                        <div class="item-img"  style="background:none;">
                            <img src="${element.goodsImg}" />
                        </div>
                        <p class="item-name">商品库存:${element.goodsNum}</p>
                        <p class="item-title">${element.goodsName}</p>
                        <p class="item-jiage">
                            <span class="redMoney">￥${element.shopPrice}</span>
                            <span class="redBtn" data-id="${element.goodsId}" onclick="downClick(this)">点击下架</span>
                        </p>
                    </div>
                `
                )
            });
        }
    })
    // 点击上架商品
    function topClick(e) {
        var dataId = $(e).attr('data-id')
        $.ajax({
            url: SURL + '/jfd/shopGoods/goodsShelves',
            type: 'post',
            data: {
                goodsId: dataId
            },
            success: res => {
                alert(res.msg)
                window.location.reload();
            }
        })

    }

    // 商品分类id
    $.ajax({
        url: SURL + '/jfd/goodsCats/listId',
        type: 'post',
        success: res => {
            // console.log(res)
            res.forEach(element => {
                $('.selectcn').append(
                    `
                    <option value="${element.catId}" id="${element.catId}">${element.catName}</option>
                    `
                )
            });
        }
    })
    // 商铺id
    $.ajax({
        url: SURL + '/jfd/shops/listId',
        type: 'post',
        data:{
          userId: localStorage.getItem('userId')
        },
        success: res => {
            // console.log(res)
            res.forEach(element => {
                $('.selectshop').append(
                    `
                    <option value="${element.shopId}" id="${element.shopId}">${element.shopName}</option>
                    `
                )
            });
        }
    })
    // 上传图片方法
    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        var index = $(fileDom).attr('index');
        // console.log(index)
        // $(fileDom).attr('index',index);
        //获取文件
        var file = fileDom.files[0];
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        var formData = new FormData();
        formData.append('file', file);
        // console.log(formData.get('file'));
        $.ajax({
            url: SURL + '/jfd/upload/pictureUpload',
            data: formData,
            type: 'post',
            cache: false,
            processData: false,
            contentType: false,
            success: res => {
                // console.log(res)
                // $('#preview1'+index).attr('src',res.data.url);
                $(fileDom).parents('.box-img').find('.preview').val(res.data.url);
            }

        })
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = document.getElementById("preview" + index);
            // console.log(img)
            //图片路径设置为读取的图片
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
        $(fileDom).parents('.box-img').find('.file-filter-p').children('img').hide();
        $(fileDom).parents('.box-img').next().show();
    }
    // 点击加号选择图片
    function clp(e) {
        var index = $(e).parents('.box-img').index();
        // console.log($(e));
        $(e).parents('.box-img').find('.input_file').attr('index', index + 1);
        return $(e).parents('.box-img').find('.input_file').click();
    }
    // 商品logo
    var upfileSelect = document.getElementById("fileP"),
        upfileElem = document.getElementById("input_filelogo");

    upfileSelect.addEventListener("click", function (e) {
        if (upfileElem) {
            upfileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);
    function tiPicture(e){
        var formData = new FormData();
        console.log(formData)
        formData.append('file',upfileElem.files[0]);
        $.ajax({
            url: SURL+'/jfd/upload/pictureUpload',
            type: 'post',
            data:formData,
            cache: false,
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res,'z上传成功');
                $('.previewlogo').val(res.data.url);
                $('#previewlogo').attr('src',res.data.url);
                $(e).siblings('.file-filter-p').children('img').hide();
            }
        })
    }

    // 提交所有信息
    function subImg() {
        var arrVis = [],
            imgUrl = '';
        var visible = $('.box-img>div.file-box>input.preview');
        $.each(visible, (index, current) => {
            arrVis.push($(current).val());
        })
        var arrVisNull = arrVis.filter(element => !element == '');
        // console.log(arrVisNull)
        var goodsImg = $('.previewlogo').val();
        var img = '';
        $.each(arrVisNull, (ind, curVi) => {
            img = curVi + ',' + curVi
        })
        console.log(img)
        var cptitle = $('[name="cp-title"]').val();
        // var cnshow = $('.cn-show').val();
        // var cntextShow = $('.cn-textShow').val();
        // var cntype = $('.cn-type').val();
        var cnnumber = $('[name="cn-number"]').val();
        var cnprice = $('[name="cn-price"]').val();
        var cnmiao = $('[name="cn-miao"]').val();
        var catId = $('#cn-type').val();
        var shopId = $('#cn-shop').val();
        var reg = /^d{1,11}$/;
        if(cptitle=='' || cnnumber=='' || cnprice==''){
            alert('请输入完整商品信息')
        }else{
            if(!reg.test(cnnumber)||!reg.test(cnprice)){
                alert('商品库存和单价只能为不大于11位数字组成')
            }else{
                $.ajax({
                    url: SURL + '/jfd/shopGoods/add',
                    type: 'post',
                    data: {
                        userId: localStorage.getItem('userId'),
                        shopId: shopId,
                        goodsName: cptitle,
                        shopPrice: cnprice,
                        goodsImg: goodsImg,
                        goodsDetails: cnmiao,
                        goodsNum: cnnumber,
                        gallery: img,
                        cartId: catId
                    },
                    dataType: 'json',
                    traditional: true,
                    success: res => {
                        alert(res.msg);
                    }
                })
            }
        }
    }
</script>

</html>
